import React from "react";
import styles from './hdb-input.module.css'
import propTypes from 'prop-types'
import renderLabel from "./renderLabel";


//1.受控和非受控
//2.单行和多行输入
//3.type/model/multi/label/style1

export default class HdbInput extends React.Component{
    static defaultProps={
        type:'text',
        model:null,
        multi:false,
        label:'',
        style:{},
    }
    static propTypes={
        type:propTypes.string,//输入框输入的文本类型(text/password/email/number...)
        model:propTypes.shape({ // model不传非受控,传了受控
            name: propTypes.string.isRequired,
            value: propTypes.string.isRequired,
            onChange: propTypes.func.isRequired
        }),
        multi: propTypes.bool,
        label: propTypes.string,
        style: propTypes.object,
    }

    renderInput=()=>{//渲染单行输入框
        let {model,label,style,type}=this.props
        let el=null
        if(!model){
            el=(
                <div className={styles.hdbInput} style={style}>
                    <input type='text' defaultValue='' style={{paddingLeft: label?'1.44rem':'0.24rem'}}/>
                    {renderLabel(label)}
                </div>
            )
            return el
        }
        //受控
        let {name, value, onChange} = model;
        el = (
            <div className={styles.hdbInput} style={style}>
                <input
                    type={type}
                    value={value}
                    onChange={onChange}
                    name={name}
                    style={{paddingLeft: label?'1.44rem':'0.24rem'}}
                />
                {renderLabel(label)}
            </div>
        );

        return el;
    }
    renderTextArea=()=>{//渲染多行输入框
        let {model,label}=this.props
        let el=null //考虑元素是否受控
        //非受控
        if(!model){
            el=(
            <div>
                {renderLabel(label)}
             <textarea></textarea>
            </div>
            )
            return el
        }
        //受控
        let {name, value, onChange} = model;
        el = (
            <div>
                {renderLabel(label)}
                <textarea value={value} onChange={onChange} name={name}></textarea>
            </div>
        )
        return el;
    }

    render() {
        let { mutil }=this.props
        return mutil ? this.renderTextArea():this.renderInput()
    }
}